<template>
  <div>
    <x-header :left-options="{backText: ''}"></x-header>
    <div v-show="!L_show">
    <p class="L_title">用户登录</p>
    <group>
    <x-input title="账号" name="mobile" placeholder="请输入账号" v-model="acc">
          <img slot="label" style="padding-right:10px;display:block;" src="static/img/user.png" width="24" height="24">
    </x-input>
    <x-input title="密码" type="password" placeholder="请输入密码" v-model="psw" :max="12" >
          <img slot="label" style="padding-right:10px;display:block;" src="static/img/lock.png" width="24" height="24">
    </x-input>
    </group>
    <div class="L_butbox">
      <button id="L_bt" class="L_button" @click="Login()" disabled>登录</button>
    </div>
    <div class="L_foot">
      <router-link class="L_line" :to="'/Registered'"><span>立即注册</span></router-link>
      <span style="font-size:18px;">丨</span>
      <router-link class="L_line" :to="'/Forgetpsw'"><span>忘记密码</span></router-link>
    </div>
    </div>
    <div v-show="L_show" class="L_ydl">
      <p>已登录</p>
      <button>注销</button>
    </div>
  </div>
</template>

<script>
import { AlertModule} from 'vux'
export default {
  data () {
    return {
      L_show:sessionStorage.getItem('User_id'),
      acc: '',
      psw: '',
    }
  },
  methods:{
      Login(){
        var that = this;
        this.$vux.loading.show({text: '登录中'})
        if(this.acc&&this.psw&&this.email!=''){
            this.$http.post("http://localhost:3000/users/Login",
            {
            User_id:this.acc,
            Psw:this.psw,
            },{emulateJSON: true})
            .then(
            (response)=>{
            setTimeout(() => {
            this.$vux.loading.hide();
            console.log(response);
            if(response.data.msg.status=='true'){
              sessionStorage.setItem('User_id',this.acc);
              this.$store.state.wd.wdid=response.data.msg.user.User_id;
              this.$store.state.wd.wdname=response.data.msg.user.User_name;
              this.$store.state.wd.wdtx=response.data.msg.user.User_tx;
              this.$store.state.wd.wdsex=response.data.msg.user.User_sex;
              this.$store.state.wd.wdlike=response.data.msg.user.Like;
              this.$store.state.wd.wdintro=response.data.msg.user.User_intro;
              
              this.$http.get("http://localhost:3000/post/Userpost/" + this.$store.state.wd.wdid)//帖子条数
              .then(
              (response)=>{
                  this.$store.state.wd.wdtz=response.data.msg.utz.length.toString();
              },
              (error)=>{
              console.log("err");
                });
              this.$http.get("http://localhost:3000/sd/Usersd/" + this.$store.state.wd.wdid)//树洞条数
              .then(
              (response)=>{
                  this.$store.state.wd.wdsd=response.data.utz.length.toString();
              },
              (error)=>{
              console.log("err");
                });
              this.$http.get("http://localhost:3000/pl/Userpl/" + this.$store.state.wd.wdid)//评论条数
              .then(
              (response)=>{
                  this.$store.state.wd.wdpl=response.data.msg.pls.length.toString();
              },
              (error)=>{
              console.log("err");
                });

              this.$store.state.wd.wddz=response.data.msg.user.User_dz.length.toString();
              this.$store.state.wd.dzlist=response.data.msg.user.User_dz;
              this.$store.state.wd.wdlook=response.data.msg.user.User_look.length.toString();
              this.$store.state.wd.looklist=response.data.msg.user.User_look;//浏览列
              this.$store.state.wd.wdflow=response.data.msg.user.Flow;
              this.$store.state.wd.wdfriend=response.data.msg.user.Friend;
              this.$socket.emit('new_user', response.data.msg.user.User_id);//登录socket
              AlertModule.show({
              title: '登录成功!',
              onHide () {
              that.$router.push('/Post/all');
              }
              })
              }
            if(response.data.msg.status=='false'){
              AlertModule.show({
              title: '密码错误',
              })
            }
            if(response.data.msg.status=='none'){
              AlertModule.show({
              title: '账号未注册',
              })
            }
            }, 1000)
            },
            (error)=>{
            console.log(error);
            }
            );
            }


      // setTimeout(() => {
      //   this.$vux.loading.hide()
      //   sessionStorage.setItem('user',18318220846);
      //   this.$store.state.user.name=18318220846;
      //   this.$vux.toast.show({
      //   type: 'text',
      //   text: '登录成功！',
      //   position: 'middle',
      //   time: '1000'
      //   })
      // }, 1000)

    },
    Btclass(){
    var L_btcolor =document.getElementById("L_bt");
    if(this.acc!='' && this.psw!=''){//按钮可用
      L_btcolor.style.color = "white";
      L_btcolor.style.backgroundColor = "#008CBA";
      L_btcolor.disabled=false;
    }
    else if(this.acc=='' || this.psw==''){//按钮不可用
      L_btcolor.style.color = "grey";
      L_btcolor.style.backgroundColor = "rgba(211, 211, 211, 0.5)";
      L_btcolor.disabled=true;
    }
    },
  },
  mounted(){
  }, 
  updated(){
    this.Btclass();
  }
}
</script>
<style lang="less" scoped>
.L_line{
text-decoration:none;  /*超链接无下划线*/
}
.L_title{
  font-size: 30px;
  margin-top: 50px;
  margin-left: 30px;
  margin-bottom: 50px;
}
.L_butbox{
  margin-top: 40px;
  text-align: center;
}
.L_button{
  color:grey;
  background-color:rgba(211, 211, 211, 0.5);
  border: none;
  border-radius: 30px;
  padding: 5px 15px;
  font-size: 16px;
  width: 85%;
  height: 40px;
}
.L_foot{
  margin: 20px;
  text-align: center;
}
.L_ydl{
  margin: 100px;
  font-size: 50px;
  text-align: center;
}
</style>
